<template>
    <div class="temp-body">
        <div class="temp-header">
            <div class="temp-title" style="width: 280px">
                {{
                    state.tempType == 'add'
                        ? t('yl.tmpAddTitle')
                        : state.tempType == 'edit'
                        ? t('yl.tmpEditTitle')
                        : t('yl.tmpCopyTitle')
                }}
            </div>

            <div class="head-btn">
                <!-- // revoke 撤销 预览view  锁定locking  复制copy  粘贴paste  上移up 下移down 删除delete -->
                <!-- <div class="head-btn-item" @click="handleFun('revoke')">
                    <RollbackOutlined />
                    <span class="head-btn-item-text">撤销</span>
                </div> -->
                <div class="head-btn-item" @click="handleFun('view')">
                    <EyeOutlined />
                    <span class="head-btn-item-text">预览</span>
                </div>
                <!-- <div class="head-btn-item">
                    <LockOutlined />
                    <span class="head-btn-item-text" @click="handleFun('locking')">锁定</span>
                </div> -->
                <div class="head-btn-item" @click="handleFun('copy')">
                    <SnippetsOutlined />
                    <span class="head-btn-item-text">复制</span>
                </div>
                <div class="head-btn-item" @click="handleFun('paste')">
                    <CopyOutlined />
                    <span class="head-btn-item-text">粘贴</span>
                </div>
                <div class="head-btn-item" @click="handleFun('up')">
                    <CopyOutlined />
                    <span class="head-btn-item-text">上移</span>
                </div>
                <div class="head-btn-item" @click="handleFun('down')">
                    <CopyOutlined />
                    <span class="head-btn-item-text">下移</span>
                </div>
                <div class="head-btn-item" @click="handleFun('delete')">
                    <DeleteOutlined />
                    <span class="head-btn-item-text">删除</span>
                </div>
                <div class="head-btn-item" style="padding: 0">
                    <a-select
                        ref="select"
                        style="width: 100%; border: none"
                        v-model:value="zoomValue"
                        @focus="focus"
                        @change="handleChange"
                    >
                        <a-select-option :value="0.5">50%</a-select-option>
                        <a-select-option :value="1">100%</a-select-option>
                        <a-select-option :value="1.5">150%</a-select-option>
                        <a-select-option :value="2">200%</a-select-option>
                    </a-select>
                    <span class="head-btn-item-text">缩放</span>
                </div>
            </div>
            <div style="width: 280px" class="temp-head-right">
                <a-button @click="cleanFun">清除重做</a-button>
                <a-button @click="cancelFun">取消</a-button>
                <a-button @click="SubmitFun">确认保存</a-button>
            </div>
        </div>
        <div class="temp">
            <div class="temp-left">
                <a-tabs v-model:activeKey="activeKey" size="small">
                    <a-tab-pane key="1" tab="基础控件">
                        <div class="head-tab-title">控件</div>

                        <div class="head-tab-main">
                            <div class="head-tab-item" @click="headIconClick('rectangle', 'imgtext', '')">
                                <img src="../../assets/images/rectangle.png" class="temp-img" />
                                <span>矩形</span>
                            </div>
                            <div class="head-tab-item" @click="headIconClick('circular', 'imgtext', '')">
                                <img src="../../assets/images/circular.png" class="temp-img" />
                                <span>圆形</span>
                            </div>
                            <div class="head-tab-item" @click="headIconClick('line', 'line', '')">
                                <img src="../../assets/images/line1.png" class="temp-img" />
                                <span>线条</span>
                            </div>
                            <div class="head-tab-item" @click="headIconClick('img', 'img', '')">
                                <img src="../../assets/images/images.png" class="temp-img" />
                                <span>商品图片</span>
                            </div>
                            <div class="head-tab-item" @click="headIconClick('qrCode', 'img', '')">
                                <img src="../../assets/images/qrcode.png" class="temp-img" />
                                <span>二维码</span>
                            </div>

                            <div class="head-tab-item" @click="headIconClick('barCode', 'img', '')">
                                <img src="../../assets/images/shape.png" class="temp-img" />
                                <span>图文条码</span>
                            </div>
                            <div class="head-tab-item" @click="headIconClick('imgBarCode', 'img', '')">
                                <img src="../../assets/images/shape1.png" class="temp-img" />
                                <span>图片条码</span>
                            </div>
                            <div class="head-tab-item" @click="headIconClick('uploadImg', 'imgUpload', '')">
                                <img src="../../assets/images/uploadImg.png" class="temp-img" />
                                <span>图片上传</span>
                            </div>
                            <div class="head-tab-item" @click="headIconClick('videoImg', 'img', '')">
                                <img src="../../assets/images/adhesive.png" class="temp-img" />
                                <span>商品视频 </span>
                            </div>

                            <div class="head-tab-item" @click="headIconClick('video', 'videoUpload', '')">
                                <img src="../../assets/images/uploadImg.png" class="temp-img" />
                                <span>上传视频</span>
                            </div>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="装饰图片" force-render>
                        <div class="head-tab-main">
                            <div class="head-tab-item" @click="headIconClick('triangle', 'img', '')">
                                <img src="https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/BlackTriangle.png" class="temp-icon" />
                            </div>
                            <div class="head-tab-item" @click="headIconClick('pentagram', 'img', '')">
                                <img src="https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/pentagram.png" class="temp-icon" />
                            </div>
                            <div
                                class="head-tab-item"
                                @click="headIconClick('decoration' + item, 'img', '')"
                                v-for="item in 13"
                                :key="item"
                            >
                                <img
                                    :src="'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/decoration' + item + '.png'"
                                    class="temp-icon"
                                />
                            </div>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="3" tab="背景图库">Content of Tab Pane 3</a-tab-pane>
                </a-tabs>
                <div class="dynamic">
                    <div class="head-tab-title">动态数据</div>
                    <div class="dynamic-main">
                        <div class="dynamic-item" @click="headIconClick('inputs', 'text', { name: '空文本', code: 'name' })">
                            空文本
                        </div>
                        <div
                            class="dynamic-item"
                            v-for="item in getskuDictList"
                            :key="item"
                            @click="headIconClick('inputs', 'text', item)"
                        >
                            {{ item.name }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="temp-main">
                <div class="temp-main-scroll">
                    <div class="temp-item" :style="{ height: state.infoHeight + 'px', width: state.infoWidth + 'px' }">
                        <div
                            class="item"
                            v-for="(item, index) in templateCommons"
                            :key="index"
                            :style="{
                                height: item.note.height * zoomValue + 'px',
                                width: item.note.width * zoomValue + 'px',
                                top: item.note.top * zoomValue + 'px',
                                left: item.note.left * zoomValue + 'px',
                            }"
                        >
                            <div
                                style="position: relative; z-index: 999"
                                :style="{
                                    height: item.note.height * zoomValue + 'px',
                                    width: item.note.width * zoomValue + 'px',
                                }"
                                class="temp-bg"
                            >
                                <div
                                    class="parent"
                                    :style="[
                                        item.note.style,
                                        {
                                            height: item.note.height * zoomValue + 'px',
                                            width: item.note.width * zoomValue + 'px',
                                        },
                                    ]"
                                    @click="tempBg"
                                >
                                    <Vue3DraggableResizable
                                        :minH="1"
                                        v-for="(item1, index1) in item.note.tempGroup"
                                        :key="index1"
                                        :x="item1.x"
                                        :y="item1.y"
                                        :w="item1.width"
                                        :h="item1.height"
                                        :parent="true"
                                        :active="item1.active"
                                        :draggable="true"
                                        :resizable="true"
                                        @drag-start="dragStartHandle($event, index1)"
                                        @resize-start="dragStartHandle($event, index1)"
                                        @dragging="dragEndHandle"
                                        @resizing="resizeEndHandle"
                                        @drag-end="dragEndHandle"
                                        @resize-end="resizeEndHandle"
                                        :style="item1.style"
                                    >
                                        <div
                                            :style="[item1.align, { height: item1.height + 'px', width: item1.width + 'px' }]"
                                            v-if="item1.tye == 'text' || item1.tye == 'imgtext'"
                                        >
                                            {{ item1.title }}
                                        </div>
                                        <img
                                            v-if="imgTypeFun(item1.type)"
                                            :src="item1.src"
                                            :alt="item1.title"
                                            :title="item1.type"
                                            :style="{ height: item1.height + 'px', width: item1.width + 'px' }"
                                        />

                                        <video
                                            v-if="item1.type === 'video'"
                                            :title="item1.tye"
                                            :width="item1.width"
                                            :height="item1.height"
                                            autoplay
                                            loop
                                            :poster="uploadImg"
                                            :src="item1.src"
                                        ></video>
                                    </Vue3DraggableResizable>
                                </div>
                                <div class="bg" v-if="tempkey !== index" @click.stop="tempItem(item, index)"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="temp-tab" :style="'width:' + templateCommons.length * 52 + 'px'">
                    <div
                        v-for="(item, index) in templateCommons"
                        :key="index"
                        :class="tempkey == index ? 'tempActive' : ''"
                        @click.stop="tempItem(item, index)"
                    >
                        {{ index + 1 }}
                    </div>
                </div>
            </div>
            <div class="temp-left">
                <a-tabs v-model:activeKey="attrActiveKey" size="small">
                    <a-tab-pane key="5" tab="组件属性">
                        <div class="attr">
                            <div class="attr-title">
                                <span>组件</span>
                                <span>{{ currentDataItem.title }}</span>
                            </div>

                            <div
                                class="attr-title"
                                v-if="JSON.stringify(currentDataItem) !== '{}' && currentDataItem.tye !== 'img'"
                            >
                                <a-textarea
                                    v-model:value="currentDataItem.title"
                                    placeholder="Basic usage"
                                    :rows="4"
                                    :disabled="currentDataItem.type !== 'text'"
                                />
                            </div>
                            <div
                                class="attr-Upload"
                                v-if="
                                    (JSON.stringify(currentDataItem) !== '{}' && currentDataItem.tye == 'imgUpload') ||
                                    currentDataItem.tye == 'videoUpload'
                                "
                            >
                                <span>文件上传</span>

                                <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" v-model:file-list="fileList">
                                    <plus-outlined></plus-outlined>
                                </a-upload>
                            </div>

                            <a-collapse v-model:activeKey="activeKey1" expand-icon-position="right">
                                <a-collapse-panel key="1" header="位置" v-if="JSON.stringify(currentDataItem) !== '{}'">
                                    <div class="position">
                                        <a-input addon-before="X轴" type="number" v-model:value="currentDataItem.x" />
                                        <a-input addon-before="Y轴" type="number" v-model:value="currentDataItem.y" />
                                        <a-input addon-before="宽(px)" type="number" v-model:value="currentDataItem.width" />
                                        <a-input
                                            addon-before="高(px)"
                                            type="number"
                                            v-model:value="currentDataItem.height"
                                            @change="inputborderWidth"
                                            @blur="inputborderWidth"
                                            @focus="inputborderWidth"
                                        />
                                        <div class="ant-input-group-wrapper rotate" v-if="currentDataItem.type !== 'line'">
                                            <span class="rotate-text">旋转</span>
                                            <span @click="rotateHandle('90')"><UndoOutlined /></span>
                                            <span @click="rotateHandle('-90')"><RedoOutlined /></span>
                                            <span @click="rotateHandle('0')"><SyncOutlined /></span>
                                        </div>
                                        <div
                                            class="ant-input-group-wrapper"
                                            style="width: 30%"
                                            v-if="currentDataItem.type !== 'line'"
                                        >
                                            <a-input-number
                                                style="width: 100%"
                                                @blur="rotateHandle"
                                                :max="360"
                                                :min="-360"
                                                v-model:value="angleKey"
                                            />
                                        </div>
                                    </div>
                                </a-collapse-panel>

                                <a-collapse-panel
                                    key="3"
                                    header="外观"
                                    :disabled="false"
                                    v-if="
                                        currentDataItem.tye !== 'img' &&
                                        currentDataItem.tye !== 'imgUpload' &&
                                        currentDataItem.tye !== 'videoUpload'
                                    "
                                >
                                    <div class="attr-text">
                                        <div
                                            class="attr-text-item"
                                            v-if="JSON.stringify(currentDataItem) !== '{}' && currentDataItem.type == 'rectangle'"
                                        >
                                            <div class="attr-text-label">圆角半径</div>
                                            <div class="attr-text-circular">
                                                <a-input-number
                                                    :min="1"
                                                    :max="100000"
                                                    v-model:value="borderTopLeftRadius"
                                                    @change="inputborderTopLeftRadius"
                                                    @blur="inputborderTopLeftRadius"
                                                    @focus="inputborderTopLeftRadius"
                                                />
                                                <a-input-number
                                                    :min="1"
                                                    :max="100000"
                                                    v-model:value="borderTopRightRadius"
                                                    @change="inputborderTopRightRadius"
                                                    @blur="inputborderTopRightRadius"
                                                    @focus="inputborderTopRightRadius"
                                                />
                                                <a-input-number
                                                    :min="1"
                                                    :max="100000"
                                                    v-model:value="borderBottomRightRadius"
                                                    @change="inputborderBottomRightRadius"
                                                    @blur="inputborderBottomRightRadius"
                                                    @focus="inputborderBottomRightRadius"
                                                />
                                                <a-input-number
                                                    :min="1"
                                                    :max="100000"
                                                    v-model:value="borderBottomLeftRadius"
                                                    @change="inputborderBottomLeftRadius"
                                                    @blur="inputborderBottomLeftRadius"
                                                    @focus="inputborderBottomLeftRadius"
                                                />
                                            </div>
                                            <div class="attr-text-Lock" @click="inputborderRadius"><LockOutlined /></div>
                                        </div>
                                        <div class="attr-text-item" v-if="currentDataItem.type !== 'line'">
                                            <div class="attr-text-label">填充颜色</div>
                                            <div class="color-tab">
                                                <div
                                                    class="color-tab-white color-tab-item"
                                                    @click="handleFontStyle('background', '#fff')"
                                                >
                                                    <CheckOutlined v-if="bjColor == '#fff'" />
                                                </div>
                                                <div
                                                    class="color-tab-black color-tab-item"
                                                    @click="handleFontStyle('background', '#000')"
                                                >
                                                    <CheckOutlined v-if="bjColor == '#000'" />
                                                </div>
                                                <div
                                                    class="color-tab-gules color-tab-item"
                                                    @click="handleFontStyle('background', '#f00')"
                                                >
                                                    <CheckOutlined v-if="bjColor == '#f00'" />
                                                </div>
                                                <div
                                                    class="color-tab-transparent color-tab-item"
                                                    @click="handleFontStyle('background', 'initial')"
                                                >
                                                    <CheckOutlined v-if="bjColor == 'initial'" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="attr-text-item" v-if="JSON.stringify(currentDataItem) !== '{}'">
                                            <div class="attr-text-label">边框颜色</div>
                                            <div class="color-tab">
                                                <div
                                                    class="color-tab-white color-tab-item"
                                                    @click="handleFontStyle('borderColor', '#fff')"
                                                >
                                                    <CheckOutlined v-if="borderColor == '#fff'" />
                                                </div>
                                                <div
                                                    class="color-tab-black color-tab-item"
                                                    @click="handleFontStyle('borderColor', '#000')"
                                                >
                                                    <CheckOutlined v-if="borderColor == '#000'" />
                                                </div>
                                                <div
                                                    class="color-tab-gules color-tab-item"
                                                    @click="handleFontStyle('borderColor', '#f00')"
                                                >
                                                    <CheckOutlined v-if="borderColor == '#f00'" />
                                                </div>
                                                <div
                                                    class="color-tab-transparent color-tab-item"
                                                    @click="handleFontStyle('borderColor', 'transparent')"
                                                >
                                                    <CheckOutlined v-if="borderColor == 'transparent'" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="attr-text-item" v-if="currentDataItem.tye == 'line'">
                                            <div class="attr-text-label"></div>
                                            <div class="color-tab">
                                                <a-select
                                                    ref="select"
                                                    v-model:value="borderStyle"
                                                    style="width: 120px"
                                                    @change="handleborderStyle"
                                                >
                                                    <a-select-option value="solid">———</a-select-option>
                                                    <a-select-option value="dashed">﹍﹍﹍</a-select-option>
                                                </a-select>
                                            </div>
                                            <!-- <div>
                                                <a-input
                                                    type="number"
                                                    v-model:value="borderWidth"
                                                    @change="inputborderWidth"
                                                    @blur="inputborderWidth"
                                                    @focus="inputborderWidth"
                                                />
                                            </div> -->
                                        </div>
                                    </div>
                                </a-collapse-panel>
                                <a-collapse-panel
                                    key="2"
                                    header="文本"
                                    :disabled="false"
                                    v-if="
                                        JSON.stringify(currentDataItem) !== '{}' &&
                                        currentDataItem.tye !== 'img' &&
                                        currentDataItem.tye !== 'imgUpload' &&
                                        currentDataItem.tye !== 'videoUpload'
                                    "
                                >
                                    <div class="attr-text">
                                        <div class="attr-text-item">
                                            <div class="attr-text-input">
                                                <a-select
                                                    ref="select"
                                                    v-model:value="fontFamily"
                                                    style="width: 120px"
                                                    @focus="focus"
                                                    @change="infoFontFamily"
                                                >
                                                    <a-select-option
                                                        :value="item.value"
                                                        v-for="(item, index) in fontList"
                                                        :key="index"
                                                        >{{ item.label }}</a-select-option
                                                    >
                                                </a-select>
                                            </div>

                                            <div class="attr-text-icon">
                                                <div class="color-tab">
                                                    <div
                                                        class="color-tab-white color-tab-item"
                                                        @click="handleFontStyle('color', '#fff')"
                                                    >
                                                        <CheckOutlined v-if="textColor == '#fff'" />
                                                    </div>
                                                    <div
                                                        class="color-tab-black color-tab-item"
                                                        @click="handleFontStyle('color', '#000')"
                                                    >
                                                        <CheckOutlined v-if="textColor == '#000'" />
                                                    </div>
                                                    <div
                                                        class="color-tab-gules color-tab-item"
                                                        @click="handleFontStyle('color', '#f00')"
                                                    >
                                                        <CheckOutlined v-if="textColor == '#f00'" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="attr-text-item">
                                            <div class="attr-text-input">
                                                <a-input-number
                                                    style="width: 100%"
                                                    :max="120"
                                                    :min="10"
                                                    @change="fontSizeHandle"
                                                    @blur="fontSizeHandle"
                                                    @focus="fontSizeHandle"
                                                    v-model:value="fontSize"
                                                />
                                            </div>
                                            <div class="attr-text-icon">
                                                <div @click="handleFontStyle('fontWeight', 'bold')">
                                                    <img
                                                        src="../../assets/images/bold.png"
                                                        class="text-icon"
                                                        v-if="fontWeight !== 'bold'"
                                                    />
                                                    <img
                                                        src="../../assets/images/bold_active.png"
                                                        class="text-icon"
                                                        v-if="fontWeight == 'bold'"
                                                    />
                                                </div>
                                                <div @click="handleFontStyle('fontStyle', 'oblique')">
                                                    <img
                                                        src="../../assets/images/oblique.png"
                                                        class="text-icon"
                                                        v-if="fontStyle !== 'oblique'"
                                                    />
                                                    <img
                                                        src="../../assets/images/oblique_active.png"
                                                        class="text-icon"
                                                        v-if="fontStyle == 'oblique'"
                                                    />
                                                </div>
                                                <div @click="handleFontStyle('textDecoration', 'line-through')">
                                                    <img
                                                        src="../../assets/images/through.png"
                                                        class="text-icon"
                                                        v-if="textDecoration !== 'line-through'"
                                                    />
                                                    <img
                                                        src="../../assets/images/through_active.png"
                                                        class="text-icon"
                                                        v-if="textDecoration == 'line-through'"
                                                    />
                                                </div>
                                                <div @click="handleFontStyle('textDecoration', 'underline')">
                                                    <img
                                                        src="../../assets/images/underline.png"
                                                        class="text-icon"
                                                        v-if="textDecoration !== 'underline'"
                                                    />
                                                    <img
                                                        src="../../assets/images/underline_active.png"
                                                        class="text-icon"
                                                        v-if="textDecoration == 'underline'"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="attr-text-item">
                                            <div class="attr-text-align">
                                                <div @click="handleFontStyle('textAlign', 'left')">
                                                    <img
                                                        src="../../assets/images/left.png"
                                                        class="align-icon"
                                                        v-if="textAlign !== 'left'"
                                                    />
                                                    <img
                                                        src="../../assets/images/left_active.png"
                                                        class="align-icon"
                                                        v-if="textAlign == 'left'"
                                                    />
                                                </div>
                                                <div @click="handleFontStyle('textAlign', 'center')">
                                                    <img
                                                        src="../../assets/images/center.png"
                                                        class="align-icon"
                                                        v-if="textAlign !== 'center'"
                                                    />
                                                    <img
                                                        src="../../assets/images/center_active.png"
                                                        class="align-icon"
                                                        v-if="textAlign == 'center'"
                                                    />
                                                </div>
                                                <div @click="handleFontStyle('textAlign', 'right')">
                                                    <img
                                                        src="../../assets/images/right.png"
                                                        class="align-icon"
                                                        v-if="textAlign !== 'right'"
                                                    />
                                                    <img
                                                        src="../../assets/images/right_active.png"
                                                        class="align-icon"
                                                        v-if="textAlign == 'right'"
                                                    />
                                                </div>
                                                <div @click="handleFontStyle('textAlign', 'right')">
                                                    <img
                                                        src="../../assets/images/center-mian.png"
                                                        class="align-icon"
                                                        v-if="verticalAlign !== 'left'"
                                                    />
                                                </div>
                                            </div>
                                            <div class="attr-text-icon">
                                                <div @click="handleFontStyle('verticalAlign', 'top')">
                                                    <img
                                                        src="../../assets/images/top.png"
                                                        class="text-icon"
                                                        v-if="verticalAlign !== 'top'"
                                                    />
                                                    <img
                                                        src="../../assets/images/top_active.png"
                                                        class="text-icon"
                                                        v-if="verticalAlign == 'top'"
                                                    />
                                                </div>
                                                <div @click="handleFontStyle('verticalAlign', 'middle')">
                                                    <img
                                                        src="../../assets/images/middle.png"
                                                        class="text-icon"
                                                        v-if="verticalAlign !== 'middle'"
                                                    />
                                                    <img
                                                        src="../../assets/images/middle_active.png"
                                                        class="text-icon"
                                                        v-if="verticalAlign == 'middle'"
                                                    />
                                                </div>
                                                <div @click="handleFontStyle('verticalAlign', 'bottom')">
                                                    <img
                                                        src="../../assets/images/bottom.png"
                                                        class="text-icon"
                                                        v-if="verticalAlign !== 'bottom'"
                                                    />
                                                    <img
                                                        src="../../assets/images/bottom_active.png"
                                                        class="text-icon"
                                                        v-if="verticalAlign == 'bottom'"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="attr-text-item">
                                            <div class="attr-text-input">
                                                <a-input
                                                    addon-before="间距"
                                                    @change="inputLetterSpacing"
                                                    @focus="inputLetterSpacing"
                                                    @blur="inputLetterSpacing"
                                                    type="number"
                                                    v-model:value="letterSpacing"
                                                />
                                            </div>
                                            <div class="attr-text-icon">
                                                <a-input
                                                    addon-before="行距"
                                                    @change="inputlineHeight"
                                                    @focus="inputlineHeight"
                                                    @blur="inputlineHeight"
                                                    type="number"
                                                    v-model:value="lineHeight"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </a-collapse-panel>
                            </a-collapse>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="6" tab="图层" force-render>
                        <!-- <div v-for="(item, index) in currentData.tempGroup" :key="index">{{ item.title }}</div> -->
                        <ul class="list">
                            <li
                                v-for="(item, index) in currentData.tempGroup"
                                :key="index"
                                class="item"
                                :class="{ active: item.active === true }"
                                @click="handleSelectRow(item, index)"
                                :tabindex="item.active === true ? tabindex - 1 : tabindex"
                                @keyup.delete="handleDelGroup(item)"
                            >
                                <span>{{ item.title }}{{ item.style.zIndex }}</span>
                                <div class="icon-group">
                                    <!-- <i
                                        v-if="index !== 0 && index !== 1"
                                        class="el-icon-back icon-up"
                                        @click.stop="handleChangeIndex('up', index)"
                                    ></i> -->
                                    <ArrowDownOutlined
                                        @click.stop="handleChangeIndex('down', index, item)"
                                        v-if="index !== currentData.tempGroup.length - 1"
                                    />
                                    <ArrowUpOutlined @click.stop="handleChangeIndex('up', index, item)" v-if="index !== 0" />
                                    <!-- <i
                                        v-if="index !== 0 && index !== tempGroup.length - 1"
                                        class="el-icon-back icon-down"
                                        @click.stop="handleChangeIndex('down', index)"
                                    ></i> -->
                                </div>

                                <a-button type="link" @click.stop="handleDelGroup(index)"> 删除 </a-button>
                            </li>
                        </ul>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
        <a-modal v-model:visible="viewVisible" title="Basic Modal" :width="state.infoWidth + 40" :height="state.infoHeight + 40">
            <div
                class="temp-item"
                :style="{ height: state.infoHeight + 'px', width: state.infoWidth + 2 + 'px', border: '1px solid #f00' }"
            >
                <div v-html="item.content" class="modalItem" v-for="(item, index) in templateCommons" :key="index"></div>
            </div>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted, computed, createVNode, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { getaskuDict } from '@/api/merchant';
import { PaginationQuery } from '@/types/table';
import {
    FundOutlined,
    CopyOutlined,
    EyeOutlined,
    AppstoreOutlined,
    UnorderedListOutlined,
    RedoOutlined,
    SyncOutlined,
    UndoOutlined,
    LockOutlined,
    RollbackOutlined,
    SnippetsOutlined,
    DeleteOutlined,
    CheckOutlined,
    ArrowDownOutlined,
    ArrowUpOutlined,
} from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import { AddTemplate, editTemplate } from '@/api/templates';
import { TableState, CheckAble } from '@/types/table';
import Vue3DraggableResizable from 'vue3-draggable-resizable';
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';
import goodsImg from '../../assets/images/images.png';
import qrcode from '../../assets/images/qrcode.png';
import barCode from '../../assets/images/shape.png';
import imgBarCode from '../../assets/images/shape1.png';
import uploadImg from '../../assets/images/uploadImg.png';
import videoImg from '../../assets/images/adhesive.png';
interface DeptState {
    name: string;
    showWay: string | number;
    splitStyle: string | number;
    preProcAction: string | number;
    templateImgeUrl: string;
    tagRatio: string | number;
    tagColour: string;
    tagRatioName: string;
    templateCommons: any[];
    infoHeight: string | number;
    infoWidth: string | number;
    type: string | number;
    industryId: string | number;
    temLang: string | number;
    tempType: string;
}
export default defineComponent({
    name: 'department',
    components: {
        CopyOutlined,
        FundOutlined,
        EyeOutlined,
        AppstoreOutlined,
        UnorderedListOutlined,
        Vue3DraggableResizable,
        RedoOutlined,
        SyncOutlined,
        UndoOutlined,
        LockOutlined,
        RollbackOutlined,
        SnippetsOutlined,
        DeleteOutlined,
        CheckOutlined,
        ArrowDownOutlined,
        ArrowUpOutlined,
    },
    props: {
        state: {
            type: Object,
            default: () => false,
        },
        templateCode: {
            type: String,
            default: '',
        },
    },
    setup(props, { emit }) {
        console.log(props);
        const state: DeptState = reactive({
            name: '', // 模板名称
            type: 1,
            industryId: 41,
            // 显示方向 0:横 1:竖
            showWay: 0,
            // 分屏样式
            splitStyle: '',
            // 	图片预处理(0:无预处理,1:抖动处理)
            preProcAction: 0,
            // 模板预览图
            templateImgeUrl: '',
            // 支持分辨率ID
            tagRatio: '',
            // 颜色ID
            tagColour: '',
            // 中文
            temLang: 'en',
            tagRatioName: '',
            // 模板分屏
            templateCommons: [],
            // 父级大小
            infoHeight: 0,
            infoWidth: 0,
            tempType: '',
        });

        console.log(props.state.templateCommons);
        state.name = props.state.name;

        props.state.templateCommons.forEach((i: any) => {
            i.note = JSON.parse(i.note);
        });

        const templateCommons = props.state.templateCommons;
        state.showWay = props.state.showWay;
        state.splitStyle = props.state.splitStyle;
        state.preProcAction = props.state.preProcAction;
        state.templateImgeUrl = props.state.templateImgeUrl;
        state.tagRatio = props.state.tagRatio;
        state.tagColour = props.state.tagColour;
        state.tagRatioName = props.state.tagRatioName;
        state.infoHeight = props.state.infoHeight;
        state.infoWidth = props.state.infoWidth;
        state.temLang = props.state.temLang;
        state.industryId = props.state.industryId;
        state.tempType = props.state.tempType;
        const { t } = useI18n();
        const activeKey = ref('1');
        const activeKey1 = ref('1');
        const attrActiveKey = ref('5');
        const tempkey = ref(0);
        const currentData: any = ref({});
        const currentDataItem: any = ref({});
        const angleKey = ref(0);
        const fontSize = ref(0);
        const fontFamily = ref('');
        const fontWeight = ref('');
        const fontStyle = ref('');
        const textDecoration = ref('');
        const textAlign = ref('');
        const verticalAlign = ref('');
        const textColor = ref('');
        const letterSpacing = ref('');
        const lineHeight = ref('');
        const bjColor = ref('');
        const borderTopLeftRadius = ref('');
        const borderTopRightRadius = ref('');
        const borderBottomRightRadius = ref('');
        const borderBottomLeftRadius = ref('');
        const borderColor = ref('');
        const borderStyle = ref('');
        const borderWidth = ref('');
        const copyCurrentDataItem: any = ref({});
        const viewVisible = ref<boolean>(false);
        const copyCurrentData: any = ref([]);
        const getskuDictList: any = ref([]);
        const zoomValue = ref(1);
        const fontList = [
            { index: 1, label: '小字', value: 'ZfullGB8' },
            { index: 2, label: '雅黑', value: 'Microsoft Yahei' },
            { index: 3, label: '幼圆', value: 'YouYuan' },
            { index: 4, label: '思源黑体', value: 'Source Han Sans CN' },
            { index: 5, label: '宋体', value: 'SimSun' },
            { index: 6, label: '雅黑细体', value: 'Microsoft YaHei Light' },
            // { index:6, label:'楷体', value:'KaiTi' },
            // { index:7, label:'苹方', value:'PingFang SC' },
            { index: 7, label: 'Psuedo Saudi', value: 'Psuedo Saudi' },
            // { index:7, label:'微软雅黑极细', value:'Microsoft YaHei Semilight' },
            // { index:8, label:'缅甸字体', value:'ZAWGYIONE' },
            { index: 8, label: '缅甸字体', value: 'Myanmar3' },
            { index: 9, label: '方正楷体简体', value: 'FZkaiTi' },
            { index: 10, label: '小楷', value: 'small KaiTi' },
            { index: 11, label: '方正书宋简体', value: 'FZsongJ' },
            { index: 12, label: '隶书', value: 'LiSu' },
            { index: 13, label: '蒙文体', value: 'hasMWbat' },
            { index: 14, label: '华文新魏', value: 'STXinwei' },
            { index: 15, label: 'Zfull-GB', value: 'Zfull-GB' },
        ];
        const vdrkey = ref(0);

        const resolve = {
            rectangle: {
                title: t('Language.矩形'),
                english: 'Rectangle',
                attr: {
                    x: 0,
                    y: 0,
                    width: 200,
                    height: 100,
                },
                style: {
                    display: 'table',
                    background: '#fff',
                    color: '#000',
                    fontSize: '16px',
                    wordWrap: 'break-word',
                    fontFamily: 'ZfullGB8',
                    transform: 'rotate(0deg)',
                    fontWeight: 'initial',
                    fontStyle: 'normal',
                    textDecoration: 'none',
                    textAlign: 'left',
                    overflow: 'hidden',
                    letterSpacing: '0px',
                    lineHeight: '14px',
                    borderTopLeftRadius: '0px',
                    borderTopRightRadius: '0px',
                    borderBottomRightRadius: '0px',
                    borderBottomLeftRadius: '0px',
                    borderColor: '#fff',
                    borderStyle: 'solid',
                    borderWidth: '1px',
                    zIndex: 1,
                },
                align: {
                    width: '100%',
                    verticalAlign: '-webkit-baseline-middle',
                    display: 'table-cell',
                },
            },

            inputs: {
                attr: {
                    x: 0,
                    y: 0,
                    width: 100,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000',
                    fontSize: '16px',
                    wordWrap: 'break-word',
                    fontFamily: 'ZfullGB8',
                    transform: 'rotate(0deg)',
                    fontWeight: 'initial',
                    fontStyle: 'normal',
                    textDecoration: 'none',
                    textAlign: 'left',
                    display: 'table-cell',
                    overflow: 'hidden',
                    letterSpacing: '0px',
                    lineHeight: '14px',
                    borderColor: 'transparent',
                    zIndex: 1,
                },
                align: {
                    // textAlign: 'left',
                    width: '100%',
                    verticalAlign: '-webkit-baseline-middle',
                    display: 'table-cell',
                    //fontFamily : 'Microsoft YaHei',
                },
            },
            radius: {
                title: t('Language.圆角矩形'),
                attr: {
                    x: 0,
                    y: 0,
                    width: 200,
                    height: 40,
                },
                style: {
                    display: 'table',
                    background: '#000',
                    color: '#fff',
                    fontSize: '14px',
                    borderRadius: '400px',
                    border: '1px solid',
                    borderColor: '#ffffff',
                    overflow: 'hidden',
                    fontFamily: 'ZfullGB8',
                    zIndex: 1,
                },
                align: {
                    width: '1000px',
                    textAlign: 'center',
                },
            },
            circular: {
                title: t('Language.圆形'),
                english: 'Round',
                attr: {
                    x: 0,
                    y: 0,
                    width: 80,
                    height: 80,
                },
                style: {
                    border: '1px solid',
                    borderColor: '#ffffff',
                    background: '#f00',
                    borderTopLeftRadius: '100%',
                    borderTopRightRadius: '100%',
                    borderBottomRightRadius: '100%',
                    borderBottomLeftRadius: '100%',
                    color: '#000',
                    fontSize: '16px',
                    wordWrap: 'break-word',
                    fontFamily: 'ZfullGB8',
                    transform: 'rotate(0deg)',
                    fontWeight: 'initial',
                    fontStyle: 'normal',
                    textDecoration: 'none',
                    textAlign: 'left',
                    display: 'table-cell',
                    overflow: 'hidden',
                    letterSpacing: '0px',
                    lineHeight: '14px',
                    borderWidth: '1px',
                    zIndex: 1,
                },
                align: {
                    verticalAlign: '-webkit-baseline-middle',
                    display: 'table-cell',
                },
            },
            triangle: {
                title: t('Language.三角形黑'),
                english: 'Triangle',
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/BlackTriangle.png',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    transform: 'rotate(0deg)',
                    zIndex: 1,
                },
                align: {},
            },
            // 二维码
            qrCode: {
                title: 'Language.二维码',
                english: 'QR code',
                src: qrcode,
                attr: {
                    x: 0,
                    y: 0,
                    width: 60,
                    height: 60,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            // 商品图片
            img: {
                title: 'Language.商品图片',
                english: 'Merchandise Pictures',
                src: goodsImg,
                attr: {
                    x: 0,
                    y: 0,
                    width: 60,
                    height: 60,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            //上传图片
            uploadImg: {
                title: '{' + t('Language.图片上传') + '}',
                english: 'Image upload',
                src: uploadImg,
                attr: {
                    x: 0,
                    y: 0,
                    width: 60,
                    height: 60,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            // 视频图片
            videoImg: {
                title: '{' + t('Language.视频图片') + '}',
                english: 'Merchandise Pictures',
                src: videoImg,
                attr: {
                    x: 0,
                    y: 0,
                    width: 60,
                    height: 60,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            //上传视频
            video: {
                title: '{' + t('Language.视频上传') + '}',
                english: 'Video upload',
                src: '',
                attr: {
                    x: 0,
                    y: 0,
                    width: 60,
                    height: 60,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            // 条形码
            barCode: {
                title: '{' + t('Language.条形码') + '}',
                english: 'Bar code',
                src: barCode,
                attr: {
                    x: 0,
                    y: 0,
                    width: 100,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            // 条形码
            imgBarCode: {
                title: '{' + t('Language.图片条码') + '}',
                english: 'imgBarCode',
                src: imgBarCode,
                attr: {
                    x: 0,
                    y: 0,
                    width: 100,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            //横线
            line: {
                title: t('Language.线'),
                english: 'line',
                attr: {
                    x: 10,
                    y: 10,
                    width: 100,
                    height: 1,
                },
                style: {
                    display: 'table',
                    borderStyle: 'solid',
                    borderWidth: '1px',
                    borderColor: '#000',
                    background: 'initial',
                    zIndex: 1,
                },
                align: {},
            },
            //五角星
            pentagram: {
                title: t('Language.五角星黑'),
                english: 'Pentagram',
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/pentagram.png',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            decoration1: {
                title: t('Language.装饰图片1黑'),
                english: 'decoration1',
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/decoration1.png',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                },
                align: {},
            },
            decoration2: {
                title: t('Language.装饰图片2黑'),
                english: 'decoration2',
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/decoration2.png',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            decoration3: {
                title: t('Language.装饰图片3黑'),
                english: 'decoration3',
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/decoration3.png',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                },
                align: {},
            },
            decoration4: {
                title: t('Language.装饰图片4黑'),
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/decoration4.png',
                english: 'decoration4',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            decoration5: {
                title: t('Language.装饰图片5黑'),
                english: 'decoration5',
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/decoration5.png',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            decoration6: {
                title: t('Language.装饰图片6黑'),
                english: 'decoration6',
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/decoration6.png',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                },
                align: {},
            },
            decoration7: {
                title: t('Language.装饰图片7黑'),
                english: 'decoration7',
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/decoration7.png',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            decoration8: {
                title: t('Language.装饰图片8黑'),
                english: 'decoration8',
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/decoration8.png',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                },
                align: {},
            },
            decoration9: {
                title: t('Language.装饰图片9黑'),
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/decoration9.png',
                english: 'decoration9',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            decoration10: {
                title: t('Language.装饰图片10黑'),
                english: 'decoration10',
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/decoration10.png',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            decoration11: {
                title: t('Language.装饰图片11黑'),
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/decoration11.png',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            decoration12: {
                title: t('Language.装饰图片12黑'),
                english: 'decoration12',
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/decoration12.png',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
            decoration13: {
                title: t('Language.装饰图片13黑'),
                english: 'decoration13',
                src: 'https://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/decoration13.png',
                attr: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                },
                style: {
                    background: 'initial',
                    color: '#000000',
                    zIndex: 1,
                },
                align: {},
            },
        };
        console.log(tempkey.value);

        currentData.value = templateCommons.length ? templateCommons[tempkey.value].note : {};
        currentDataItem.value =
            templateCommons.length && templateCommons[tempkey.value].note.tempGroup.length
                ? templateCommons[tempkey.value].note.tempGroup[vdrkey.value]
                : {};

        onMounted(async () => {
            getskuDictData();
        });
        // 获取table数据
        const getskuDictData = async () => {
            getskuDictList.value = await getaskuDict();
        };
        const print = (val) => {
            console.log(val);
        };
        const activatedHandle = (val) => {
            console.log('activatedHandle');
            console.log(val);
        };
        const deactivatedHandle = (val) => {
            console.log('deactivatedHandle');
            console.log(val);
        };
        // 拖拽开始
        const dragStartHandle = (val: any, key: number) => {
            vdrkey.value = key;
            currentDataItem.value = {};
            currentDataItem.value = templateCommons[tempkey.value].note.tempGroup[vdrkey.value];
            templateCommons[tempkey.value].note.tempGroup.forEach((i: any) => {
                i.active = false;
            });
            currentDataItem.value.active = true;
            copyCurrentData.value = [];
            // copyCurrentDataItem.value = {};
            angleKeyFun();
        };

        const dragEndHandle = (val: any) => {
            templateCommons[tempkey.value].note.tempGroup[vdrkey.value].x = val.x;
            templateCommons[tempkey.value].note.tempGroup[vdrkey.value].y = val.y;
            console.log(templateCommons[tempkey.value].note.tempGroup[vdrkey.value]);
        };
        const resizeEndHandle = (val: any) => {
            templateCommons[tempkey.value].note.tempGroup[vdrkey.value].width = val.w;
            templateCommons[tempkey.value].note.tempGroup[vdrkey.value].height = val.h;
            console.log(templateCommons[tempkey.value].note.tempGroup[vdrkey.value]);
            if (currentDataItem.value.type == 'line') {
                // currentDataItem.value.height = borderWidth.value;
                currentDataItem.value.style.borderWidth = val.h + 'px';
            }
        };
        // 图标点击事件
        const headIconClick = (val: string, text: any, item1: any) => {
            console.log(val);
            console.log(text);
            console.log(item1);
            let place = '';
            // 零售commonPrice 会员memberPrice 促销 bargainPrice 市场
            // val  图标原生类型 根据类型查找当前属性初始化值
            // text 图标归类  文本  图片  图片上传  视频上传  线

            if (item1.code) {
                switch (item1.code) {
                    case 'commonPrice':
                        place = item1.code;
                        break;
                    case 'memberPrice':
                        place = item1.code;
                        break;
                    case 'bargainPrice ':
                        place = item1.code;
                        break;
                        break;
                    case 'marketPrice ':
                        place = item1.code;
                        break;
                    default:
                        place = '';
                        break;
                }
            }
            let tempGroupItem = new Object();
            let resolveList = Object.keys(resolve);
            resolveList.forEach((item) => {
                if (item == val) {
                    tempGroupItem = {
                        id: new Date().valueOf(),
                        tye: text,
                        x: resolve[item].attr.x,
                        y: resolve[item].attr.x,
                        width: resolve[item].attr.width,
                        height: resolve[item].attr.height,
                        style: resolve[item].style,
                        title: item1 ? item1.name : resolve[item].title,
                        label: resolve[item].label,
                        active: true,
                        type: val,
                        align: resolve[item].align,
                        src: resolve[item].src,
                        dataType: item1 ? item1.code : val,
                        place: place,
                    };
                }
            });
            // 查询出最大得zindex
            tempGroupItem.style.zIndex = mathMax();
            templateCommons[tempkey.value].note.tempGroup?.push(JSON.parse(JSON.stringify(tempGroupItem)));
            currentDataItem.value =
                templateCommons[tempkey.value].note.tempGroup[templateCommons[tempkey.value].note.tempGroup.length - 1];
            //当前窗口选中值
            vdrkey.value = templateCommons[tempkey.value].note.tempGroup.length - 1;
        };
        const tempItem = (val: any, key: number) => {
            tempkey.value = key;
            currentData.value = templateCommons[tempkey.value].note;
            bjColor.value = currentData.value.style.background;
            console.log(bjColor.value);
            activeKey1.value = '3';
            // currentDataItem.value = {};
        };
        const tempBg = (event) => {
            let el1 = event.currentTarget;
            let el2 = event.target;
            if (el1 === el2) {
                bjColor.value = currentData.value.style.background;
                activeKey1.value = '3';
                copyCurrentDataItem.value = {};
                currentDataItem.value = {};
            }
        };
        // 获取没一个分屏的最大zindex
        const mathMax = () => {
            if (templateCommons[tempkey.value].note.tempGroup && templateCommons[tempkey.value].note.tempGroup.length) {
                let num: any = [];
                templateCommons[tempkey.value].note.tempGroup.forEach((i: any) => {
                    i.active = false;
                    num.push(i.style.zIndex);
                });

                return Math.max(...num) + 1;
            } else {
                return 1;
            }
        };
        // 文本旋转点击事件
        const rotateHandle = (val: string | number) => {
            let style = currentDataItem.value.style;

            if (val == '90') {
                angleKey.value = angleKey.value + 90;
                angleKey.value > 360 ? (angleKey.value = 360) : angleKey.value;
                style.transform = `rotate(${angleKey.value}deg)`;
            } else if (val == '-90') {
                angleKey.value = angleKey.value - 90;
                angleKey.value < -360 ? (angleKey.value = -360) : angleKey.value;
                style.transform = `rotate(${angleKey.value}deg)`;
            } else if (val == '0') {
                angleKey.value = 0;
                style.transform = 'rotate(0deg)';
            } else {
                angleKey.value ? angleKey.value : (angleKey.value = 0);
                style.transform = `rotate(${angleKey.value}deg)`;
            }
        };
        // 获取旋转值
        const angleKeyFun = () => {
            let style = currentDataItem.value.style;
            if (style.transform) {
                let values = style.transform.split('(')[1].split(')')[0].split(',');
                let a = values[0];
                let scale = a.slice(0, -3);
                angleKey.value = parseInt(scale);
            }

            if (currentDataItem.value.tye == 'text' || currentDataItem.value.tye == 'imgtext') {
                // 字体大小
                let fontNum = style.fontSize.substring(0, 2);
                fontSize.value = parseInt(fontNum);
                fontFamily.value = style.fontFamily;
                fontWeight.value = style.fontWeight;
                fontStyle.value = style.fontStyle;
                textDecoration.value = style.textDecoration;
                textAlign.value = style.textAlign;
                textColor.value = style.color;
                letterSpacing.value = style.letterSpacing.substring(0, style.letterSpacing.length - 2);
                lineHeight.value = style.lineHeight.substring(0, style.lineHeight.length - 2);
                bjColor.value = style.background;
                borderColor.value = style.borderColor;
            }

            if (currentDataItem.value.tye == 'line') {
                borderStyle.value = style.borderStyle;
                borderWidth.value = style.borderWidth.substring(0, style.borderWidth.length - 2);
            }

            if (currentDataItem.value.type == 'rectangle') {
                borderTopLeftRadius.value = style.borderTopLeftRadius.substring(0, style.borderTopLeftRadius.length - 2);
                borderTopRightRadius.value = style.borderTopRightRadius.substring(0, style.borderTopRightRadius.length - 2);
                borderBottomRightRadius.value = style.borderBottomRightRadius.substring(
                    0,
                    style.borderBottomRightRadius.length - 2
                );
                borderBottomLeftRadius.value = style.borderBottomLeftRadius.substring(0, style.borderBottomLeftRadius.length - 2);
            }
        };
        const handleFontStyle = (key: string, val: string) => {
            let style = currentDataItem.value.style;
            //  key  样式名  val样式值
            switch (key) {
                case 'fontFamily':
                    fontFamily.value = val;
                    style.fontFamily = val;
                    break;
                case 'fontWeight':
                    fontWeight.value = fontWeight.value == 'bold' ? 'initial' : val;
                    style.fontWeight = fontWeight.value;
                    break;
                case 'fontStyle':
                    fontStyle.value = fontStyle.value == 'oblique' ? 'normal' : val;
                    style.fontStyle = fontStyle.value;
                    break;
                case 'textDecoration':
                    console.log(val);
                    textDecoration.value = textDecoration.value == val ? 'none' : val;
                    style.textDecoration = textDecoration.value;
                    break;
                case 'textAlign':
                    textAlign.value = val;
                    style.textAlign = textAlign.value;
                    break;
                case 'verticalAlign':
                    verticalAlign.value = val;
                    currentDataItem.value.align.verticalAlign = verticalAlign.value;
                    break;
                case 'color':
                    textColor.value = val;
                    style.color = textColor.value;
                    break;
                case 'background':
                    bjColor.value = val;
                    if (JSON.stringify(currentDataItem.value) !== '{}') {
                        style.background = bjColor.value;
                    } else {
                        templateCommons[tempkey.value].note.style.background = bjColor.value;
                    }

                    break;
                case 'borderColor':
                    borderColor.value = val;
                    style.borderColor = borderColor.value;
                    break;
                default:
                    break;
            }
        };

        const fontSizeHandle = () => {
            console.log(fontSize.value);
            currentDataItem.value.style.fontSize = fontSize.value + 'px';
        };
        // 选择字体
        const infoFontFamily = (val: any) => {
            currentDataItem.value.style.fontFamily = fontFamily.value;
        };
        const inputLetterSpacing = (val: any) => {
            currentDataItem.value.style.letterSpacing = letterSpacing.value + 'px';
        };
        // 行高
        const inputlineHeight = () => {
            console.log(lineHeight.value);
            currentDataItem.value.style.lineHeight = lineHeight.value + 'px';
        };
        // 圆角top右侧
        const inputborderRadius = () => {
            borderTopLeftRadius.value = '5';
            borderTopRightRadius.value = '5';
            borderBottomLeftRadius.value = '5';
            borderBottomRightRadius.value = '5';
            currentDataItem.value.style.borderTopLeftRadius = '5px';
            currentDataItem.value.style.borderTopRightRadius = '5px';
            currentDataItem.value.style.borderBottomLeftRadius = '5px';
            currentDataItem.value.style.borderBottomRightRadius = '5px';
        };

        const inputborderTopLeftRadius = () => {
            if (Number(borderTopLeftRadius.value) < 0) {
                borderTopLeftRadius.value = '0';
            }
            if (Number(borderTopLeftRadius.value) > currentDataItem.value.width) {
                borderTopLeftRadius.value = currentDataItem.value.width;
            }
            currentDataItem.value.style.borderTopLeftRadius = borderTopLeftRadius.value + 'px';
        };

        const inputborderTopRightRadius = () => {
            if (Number(borderTopRightRadius.value) < 0) {
                borderTopRightRadius.value = '0';
            }
            if (Number(borderTopRightRadius.value) > currentDataItem.value.width) {
                borderTopRightRadius.value = currentDataItem.value.width;
            }
            currentDataItem.value.style.borderTopRightRadius = borderTopRightRadius.value + 'px';
        };

        const inputborderBottomRightRadius = () => {
            if (Number(borderBottomRightRadius.value) < 0) {
                borderBottomRightRadius.value = '0';
            }
            if (Number(borderBottomRightRadius.value) > currentDataItem.value.width) {
                borderBottomRightRadius.value = currentDataItem.value.width;
            }
            currentDataItem.value.style.borderBottomRightRadius = borderBottomRightRadius.value + 'px';
        };

        const inputborderBottomLeftRadius = () => {
            if (Number(borderBottomLeftRadius.value) < 0) {
                borderBottomLeftRadius.value = '0';
            }
            if (Number(borderBottomLeftRadius.value) > currentDataItem.value.width) {
                borderBottomLeftRadius.value = currentDataItem.value.width;
            }
            currentDataItem.value.style.borderBottomLeftRadius = borderBottomLeftRadius.value + 'px';
        };

        const handleborderStyle = () => {
            currentDataItem.value.style.borderStyle = borderStyle.value;
        };

        const inputborderWidth = () => {
            if (currentDataItem.value.type == 'line') {
                // currentDataItem.value.height = borderWidth.value;
                currentDataItem.value.style.borderWidth = currentDataItem.value.height + 'px';
            }
        };
        // 根据img类型 展示图片
        const imgTypeFun = (val: any) => {
            let imgType = [
                'img',
                'qrCode',
                'barCode',
                'imgBarCode',
                'uploadImg',
                'triangle',
                'pentagram',
                'videoImg',
                'imgUpload',
                'decoration1',
                'decoration2',
                'decoration13',
                'decoration4',
                'decoration5',
                'decoration6',
                'decoration7',
                'decoration8',
                'decoration9',
                'decoration10',
                'decoration11',
                'decoration13',
                'decoration13',
            ];
            return imgType.indexOf(val) > -1 ? true : false;
        };

        const handleSelectRow = (item: any, index: number) => {
            currentData.value.tempGroup.forEach((i: any) => {
                i.active = false;
            });
            item.active = true;
        };

        // 改变图层顺序
        const handleChangeIndex = (type: string, key: number, item: any) => {
            console.log(type);
            if (type === 'up') {
                swapArray(currentData.value.tempGroup, key, key - 1, 'up', item);
            } else if (type === 'down') {
                swapArray(currentData.value.tempGroup, key, key + 1, 'down', item);
            }
        };

        // 替换位置
        const swapArray = (arr: any, index1: number, index2: number, type: string, item: any) => {
            const nIndex = currentData.value.tempGroup[index1].style.zIndex;
            const oIndex = currentData.value.tempGroup[index2].style.zIndex;
            currentData.value.tempGroup[index1].style.zIndex = oIndex;
            currentData.value.tempGroup[index2].style.zIndex = nIndex;
            currentData.value.tempGroup[index1] = currentData.value.tempGroup.splice(
                index2,
                1,
                currentData.value.tempGroup[index1]
            )[0];
            currentData.value.tempGroup.forEach((i: any) => {
                i.active = false;
            });
            item.active = true;
            currentDataItem.value = item;
            console.log(currentData.value.tempGroup[index2]);
            console.log('urrentData.value.tempGroup[index2]');
            console.log(currentData.value.tempGroup[index1]);
            console.log(currentData.value.tempGroup);
            vdrkey.value = index2;
        };

        // 删除图层
        const handleDelGroup = (ele: number) => {
            currentData.value.tempGroup.splice(ele, 1);
            resetFun();
        };
        const resetFun = () => {
            if (currentData.value.tempGroup.length) {
                currentDataItem.value = currentData.value.tempGroup[currentData.value.tempGroup.length - 1];
                currentDataItem.value.active = true;
                // 获取当前元素下标
                vdrkey.value = currentData.value.tempGroup.length - 1;
            }
        };
        // 头部操作
        const handleFun = (type: string) => {
            console.log(type);
            console.log(copyCurrentData.value);
            console.log(currentDataItem.value);
            // revoke 撤销 预览view  锁定locking  复制copy  粘贴paste  上移up 下移down 删除delete
            if (type == 'copy' && JSON.stringify(currentDataItem.value) == '{}' && !currentData.value.tempGroup.length) {
                return;
            }
            switch (type) {
                case 'revoke':
                    currentData.value.tempGroup = [];
                    break;
                case 'view':
                    console.log('view');
                    viewHtmlFun();
                    viewVisible.value = true;
                    break;
                case 'locking':
                    break;
                case 'copy':
                    if (JSON.stringify(currentDataItem.value) == '{}') {
                        copyCurrentData.value = JSON.parse(JSON.stringify(currentData.value.tempGroup));
                        console.log(copyCurrentData.value);
                    } else {
                        copyCurrentDataItem.value = JSON.parse(JSON.stringify(currentDataItem.value));
                        console.log(copyCurrentDataItem.value);
                    }

                    break;
                case 'paste':
                    if (JSON.stringify(copyCurrentDataItem.value) == '{}') {
                        currentData.value.tempGroup = JSON.parse(JSON.stringify(copyCurrentData.value));
                    } else {
                        currentData.value.tempGroup.push(JSON.parse(JSON.stringify(copyCurrentDataItem.value)));
                        currentData.value.tempGroup[currentData.value.tempGroup.length - 1].style.zIndex = mathMax();
                    }

                    resetFun();
                    console.log(currentData.value.tempGroup);
                    break;
                case 'up':
                    if (JSON.stringify(currentDataItem.value) == '{}') {
                        return;
                    }
                    if (vdrkey.value >= currentData.value.tempGroup.length - 1) {
                        return;
                    }
                    handleChangeIndex('down', vdrkey.value, currentDataItem.value);

                    break;
                case 'down':
                    if (JSON.stringify(currentDataItem.value) == '{}') {
                        return;
                    }
                    if (vdrkey.value <= 0) {
                        return;
                    }
                    handleChangeIndex('up', vdrkey.value, currentDataItem.value);
                    break;
                case 'delete':
                    currentDataItem.value = {};
                    currentData.value.tempGroup = [];
                    // if (currentData.value.tempGroup.length) {
                    //     currentData.value.tempGroup.splice(vdrkey.value, 1);
                    //     resetFun();
                    // }

                    break;
                default:
                    break;
            }
        };
        const strFun = (style: any, pl: any) => {
            let str = '';
            pl.forEach((item: any, index: number) => {
                let item1 = item.replace(/([A-Z])/g, '-$1').toLowerCase();
                str += item1 + `:${style[item]};`;
            });
            return str;
        };
        const viewHtmlFun = () => {
            templateCommons.forEach((i: any) => {
                let html = [];
                html.push(
                    `<div attrstyle="top:${i.note.top}px;left:${i.note.left}px"  style='${
                        strFun(i.note.style, Object.keys(i.note.style)) +
                        'width:' +
                        i.note.width +
                        'px;' +
                        'height:' +
                        i.note.height +
                        'px;' +
                        ' top:' +
                        i.note.top +
                        'px;' +
                        'left:' +
                        i.note.left +
                        'px;'
                    }'>`
                );
                i.note.tempGroup.forEach((v: any) => {
                    html.push(
                        `<div  ${v.tye == 'text' ? 'placesize=' + v.style.fontSize : ''}   place="yalabi_${
                            v.place ? ' v.place' : ''
                        }" price="yalabi_${v.dataType}" style='${
                            strFun(v.style, Object.keys(v.style)) +
                            'width:' +
                            v.width +
                            'px;' +
                            'height:' +
                            v.height +
                            'px;' +
                            'position: absolute;' +
                            'top:' +
                            v.y +
                            'px;' +
                            'left:' +
                            v.x +
                            'px;'
                        }'>
                       ${textType(v)}
                        </div>`
                    );
                });
                html.push(`</div>`);
                i.content = html.join('');
            });
        };
        const SubmitFun = () => {
            viewHtmlFun();
            let commons = JSON.parse(JSON.stringify(templateCommons));
            for (let i = 0; i < commons.length; i++) {
                commons[i].note = JSON.stringify(commons[i].note);
                if (state.tempType == 'copy') {
                    commons[i].templateCode = '';
                    commons[i].number = commons[i].serial;
                    delete commons[i].templateCommonId;
                    delete commons[i].serial;
                    delete commons[i].merchantCode;
                }
            }
            let data = {
                industryId: state.industryId,
                name: props.state.name,
                preProcAction: state.preProcAction,
                showWay: state.showWay,
                splitStyle: state.splitStyle,
                tagColour: state.tagColour,
                tagRatio: state.tagRatio,
                temLang: state.temLang,
                templateCommons: commons,
                templateImgeUrl: state.templateImgeUrl,
                type: state.type,
            };

            if (state.tempType == 'edit') {
                data.templateCode = props.templateCode;
            }
            console.log(data);

            const realRequest = state.tempType == 'edit' ? editTemplate(data) : AddTemplate(data);

            realRequest
                .then((res) => {
                    const timer = setTimeout(() => {
                        emit('goBack');
                        clearTimeout(timer);
                    }, 1000);
                })
                .catch(() => {
                    // state.confirmLoading = false;
                });
        };
        // 根据类型判断不同的显示
        const textType = (item: any) => {
            let html = '';
            if (item.tye == 'text' || item.tye == 'imgtext') {
                html = `<div style="${strFun(item.align, Object.keys(item.align))},height:${item.height}px; width: ${
                    item.width
                }px;">${item.title}</div>`;
            }
            if (imgTypeFun(item.type)) {
                html = `<img src="${item.src}" alt="${item.title}" title="${item.type}" style="height:${item.height}px;width:${item.width}px"/>`;
            }
            if (item.type === 'video') {
                html = `<video title="${item.tye}" width="${item.width}" height="${item.height}" autoplay loop poster="${uploadImg}" src="${item.src}"></video>`;
            }
            return html;
        };

        const cancelFun = () => {
            emit('goBack');
        };
        // 清除重做
        const cleanFun = () => {
            for (let i = 0; i < templateCommons.length; i++) {
                templateCommons[i].content = '';
                templateCommons[i].note.tempGroup = [];
            }
        };
        return {
            cancelFun,
            t,
            print,
            activeKey,
            activeKey1,
            attrActiveKey,
            resolve,
            headIconClick,
            activatedHandle,
            deactivatedHandle,
            dragStartHandle,
            dragEndHandle,
            tempItem,
            resizeEndHandle,
            inputlineHeight,
            inputLetterSpacing,
            infoFontFamily,
            fontSizeHandle,
            handleFontStyle,
            angleKeyFun,
            rotateHandle,
            goodsImg,
            qrcode,
            barCode,
            imgBarCode,
            uploadImg,
            videoImg,
            tempkey,
            vdrkey,
            currentData,
            currentDataItem,
            tempBg,
            angleKey,
            fontList,
            fontSize,
            fontFamily,
            fontWeight,
            fontStyle,
            textDecoration,
            textAlign,
            verticalAlign,
            textColor,
            letterSpacing,
            lineHeight,
            borderTopLeftRadius,
            borderTopRightRadius,
            borderBottomRightRadius,
            borderBottomLeftRadius,
            inputborderRadius,
            inputborderTopLeftRadius,
            inputborderTopRightRadius,
            inputborderBottomRightRadius,
            inputborderBottomLeftRadius,
            bjColor,
            borderColor,
            borderStyle,
            borderWidth,
            handleborderStyle,
            inputborderWidth,
            imgTypeFun,
            handleSelectRow,
            handleChangeIndex,
            swapArray,
            handleDelGroup,
            handleFun,
            copyCurrentDataItem,
            resetFun,
            SubmitFun,
            strFun,
            textType,
            viewVisible,
            copyCurrentData,
            getskuDictData,
            getskuDictList,
            templateCommons,
            viewHtmlFun,
            zoomValue,
            cleanFun,
        };
    },
});
</script>

<style lang="scss" scoped>
.temp-body {
    width: 100%;

    height: 100%;
    .temp-header {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
        margin-bottom: 10px;
        align-items: center;
        box-sizing: border-box;
        .temp-title {
            font-size: 20px;
        }
        .head-btn {
            display: flex;
            justify-content: space-between;
            .head-btn-item {
                width: 50px;
                height: 50px;
                border: 1px solid #ccc;
                border-radius: 4px;
                text-align: center;
                box-sizing: border-box;
                padding: 4px;
                margin: 0 5px;
                .head-btn-item-text {
                    display: block;
                }
                .anticon {
                    font-size: 20px;
                    .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
                        border: none;
                    }
                }
            }
        }
        .temp-head-right {
            text-align: right;
            .ant-btn {
                margin-left: 10px;
            }
        }
    }
    .temp {
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 100%;
        .head-tab-main {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .head-tab-item {
                cursor: pointer;
                width: 22%;
                border: 1px solid #ccc;
                margin: 4px;
                padding: 8px 4px;
                text-align: center;
                border-radius: 5px;
            }
        }
        .head-tab-title {
            font-size: 12px;
            font-weight: bold;
            margin-left: 4px;
        }
        .attr {
            box-sizing: border-box;
            .attr-title {
                padding: 5px 15px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #ccc;
            }
            .attr-Upload {
                padding: 15px 15px;

                border-bottom: 1px solid #ccc;
            }
            .position {
                padding: 5px 15px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .ant-input-group-wrapper {
                    width: 47%;
                    margin-top: 10px;
                    // padding: 5px 0;
                }
                .rotate {
                    width: 60%;
                    border: 1px solid #d9d9d9;
                    border-radius: 3px;
                    display: flex;
                    justify-content: space-between;
                    padding-right: 10px;
                    align-items: center;
                    > span {
                        display: inline-block;
                        // padding: 4px 0px;
                    }
                    .anticon {
                        font-size: 19px;
                        margin-top: 3px;
                    }
                    .rotate-text {
                        background-color: #fafafa;
                        padding: 4px 10px;
                        border-right: 1px solid #d9d9d9;
                    }
                }
            }
            .attr-text {
                width: 100%;
                padding: 0 15px;
                .attr-text-item {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    align-items: center;
                    margin-top: 10px;
                    .attr-text-input {
                        width: 48%;
                    }
                    .attr-text-align {
                        width: 48%;
                        border: 1px solid #ccc;
                        display: flex;
                        justify-content: space-between;
                    }
                    .attr-text-icon {
                        width: 48%;
                        display: flex;
                        .text-icon {
                            width: 20px;
                        }
                        .align-icon {
                            width: 15px;
                        }
                    }
                    .attr-text-circular {
                        width: 164px;
                        display: flex;
                        .ant-input-number-input {
                            border-radius: 0;
                        }
                    }
                    .attr-text-label {
                        width: 50px;
                    }
                    .attr-text-Lock {
                        font-size: 16px;
                    }
                    .color-tab {
                        display: flex;
                        flex: 1;
                        .color-tab-item {
                            width: 20px;
                            height: 20px;
                            margin: 5px;
                            text-align: center;
                            color: #fff;
                            font-weight: bold;
                        }
                        .color-tab-white {
                            background: white;
                            border: 0.5px solid #ccc;
                            color: #fe6700;
                        }
                        .color-tab-black {
                            background: black;
                        }
                        .color-tab-gules {
                            background: #f00;
                        }
                        .color-tab-transparent {
                            color: #fe6700;
                            background: url('http://yltag.oss-cn-shenzhen.aliyuncs.com/bsimg/20190603/20190603144633.png') 50%;
                        }
                    }
                }
            }
        }

        .list {
            display: flex;
            flex-direction: column;
            padding: 5px 15px;
            overflow-y: scroll;

            .item {
                display: flex;
                width: 100%;
                justify-content: space-between;
                align-items: baseline;
                font-size: 13px;
                cursor: pointer;

                &.active {
                    color: #67c23a;
                }

                .icon-group {
                    display: flex;
                    flex: 1 0 0;
                    padding-right: 5px;
                    justify-content: flex-end;

                    .icon-up {
                        padding: 0 3px;
                        transform: rotate(90deg);
                    }

                    .icon-down {
                        padding: 0 3px;
                        transform: rotate(-90deg);
                    }
                }

                .el-button--text {
                    font-size: 13px;
                }
            }
        }
        .dynamic-main {
            display: flex;

            flex-wrap: wrap;
            .dynamic-item {
                cursor: pointer;
                padding: 5px;
                border: 1px solid #ccc;
                border-radius: 4px;
                margin: 6px;
            }
        }
        .temp-main {
            width: 640px;
            height: 400px;

            .temp-main-scroll {
                width: 640px;
                height: 400px;
                border: 1px solid #ccc;
                overflow: scroll;
                .temp-item {
                    position: relative;
                    .item {
                        position: absolute;
                        border: 1px solid #ccc;
                    }
                }
            }
        }
        .temp-tab {
            display: flex;
            margin: 15px auto auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            overflow: hidden;
            > div {
                width: 52px;
                border-right: 1px solid #ccc;
                text-align: center;
                height: 30px;
                line-height: 30px;
            }
            > div:last-child {
                border-right: none;
            }
            .tempActive {
                background: #fe6700;
                color: #fff;
            }
            .tempNobr {
                border-right: none;
            }
        }
    }
}
</style>
<style>
.none {
    line-height: 0 !important;
    font-size: 0 !important;
    height: 0 !important;
    white-space: nowrap;
    outline: 0 !important;
    border: none !important;
}
.parent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0808082b;
    z-index: 999;
}
.temp-left {
    width: 280px;
    height: 90%;
    border: 1px solid #ccc;
    overflow: scroll;
}
.temp-img {
    width: 22px;
    display: block;
    margin: 0px auto;
}
.temp-icon {
    width: 20px;
}
.temp .ant-collapse {
    border: none;
    background: none;
}

.temp .ant-collapse-content > .ant-collapse-content-box {
    padding: 0px;
}
.temp .ant-collapse > .ant-collapse-item {
    border: none;
}
.temp .ant-collapse-content {
    border: none;
}
.temp-bg {
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 0) 0 0/10px 10px,
        linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 0) 0 0/10px 10px;
}
.modalItem {
    position: absolute;
}
</style>
